<template>
  <div style="padding:0 30px">
    <el-table
      ref="multipleTable"
      :data="tableData"
      stripe
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        @click="clicked"
      />
      <template>
        <el-table-column
          v-for="(item,index) in tableTitle"
          :key="index"
          :label="item.cn"
          :prop="item.en"
        >
          <!--<template slot-scope="scope">{{ scope.row[item.en] }}</template>-->
        </el-table-column>
      </template>
      <el-table-column
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button class="btn btn-green" type="info" plain>查看</el-button>
          <el-button class="btn btn-green" type="primary" plain>修改</el-button>
          <el-button class="btn btn-green" type="danger" plain>删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-row type="flex" justify="end" class="block">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="perNum"
        :total="total"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </el-row>
  </div>

</template>

<script>
export default {
  props: {
    tableTitle: {
      type: Array,
      default: () => { return [] }
    },
    tableData: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    const pageSizes = [10, 20, 30, 50, 100]
    const perNum = pageSizes[0]
    return {
      multipleSelection: '',
      pageSizes: pageSizes,
      perNum: perNum,
      currentPage: 1
    }
  },
  computed: {
    currentList() {
      const arr = []
      for (let i = this.perNum * (this.currentPage - 1); i < this.perNum * this.currentPage && i < this.tableData.length; i++) {
        // if(this.tableData[i]){
        arr.push(this.tableData[i])
        // }
      }
      return arr
    },
    total() {
      return this.tableData.length
    }
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    clicked(val) {
      console.log(val)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.perNum = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    }
  }
}
</script>

<style scoped>
    .btn {
        padding: 5px 8px;
        border-radius: 50px;
        border: none;
        outline: none;
        cursor: pointer;
    }

    .btn-green {
        /*background-color: #cbf0a6;*/
    }
    .block {
        padding-top: 15px;
    }
</style>
